<template lang="">
  <div class="article">
    <el-card class="card" shadow="hover">
      <div slot="header" class="">
        <span>查询条件</span>
      </div>
      <el-form
        ref="form"
        :model="form"
        label-width="80px"
        :inline="false"
        size="mini"
      >
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="作者">
              <el-input v-model="form.author" placeholder="作者" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标题">
              <el-input v-model="form.title" placeholder="标题" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="编辑类型">
              <el-select v-model="form.editorType" placeholder="编辑类型">
                <el-option :key="0" label="富文本" :value="0" />
                <el-option :key="1" label="Markdown" :value="1" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6" :offset="18">
            <el-button size="mini" @click="onReset()">重置</el-button>
            <el-button
              type="primary"
              size="mini"
              @click="onSearch"
            >搜索</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <!-- 列表 -->
    <el-card shadow="hover" class="card">
      <div slot="header">
        <el-button
          type="primary"
          size="mini"
          @click="handleAdd"
        >新增</el-button>
      </div>
      <el-table :data="list" border stripe>
        <el-table-column type="index" label="#" align="center" />
        <el-table-column prop="title" label="文章标题" align="center" />
        <el-table-column prop="title" label="展示图片" align="center">
          <template slot-scope="scope">
            <div>
              <img :src="scope.row.coverImg" class="item-icon">
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="添加时间" align="center" />
        <el-table-column prop="author" label="文章作者" align="center" />
        <el-table-column prop="isShow" label="文章是否展示" align="center">
          <template slot-scope="scope">
            <div>
              <el-switch v-model="scope.row.isShow" :active-value="1" :inactive-value="0" @change="handleStateChange(scope.row.id,scope.row.isShow)" />
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="editorType" label="内容" align="center">
          <template slot-scope="scope">
            <div>
              <el-tag v-if="scope.row.editorType == 0">富文本</el-tag>
              <el-tag v-else>Markdown</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="action" label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="default" icon="el-icon-view" @click="handleEdit(scope.row)">编辑文章</el-button>
            <el-button type="text" size="default" class="delBtn" @click="handleDel(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pagination"
        :current-page="page.start"
        :page-sizes="pages"
        :page-size="page.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
  </div>
</template>
<script>
import { findArticles } from '@/api/content'
import { delArticle, changeShowStatus } from '@/api/content/articleList/index'
export default {
  data() {
    return {
      form: {
        author: '',
        title: '',
        editorType: ''
      },
      list: [], // 文章列表
      pages: [10, 20, 50, 100],
      page: {
        //  分页
        start: 1,
        limit: 10,
        total: 0
      }
    }
  },

  created() {
    // 获取文章列表
    this.getArticles()
  },
  methods: {
    // form 提交
    onSearch() {
      this.getArticles()
    },
    // 重置
    onReset() {
      this.form = {
        author: '',
        title: '',
        editorType: '' }
      this.getArticles()
    },
    // 新增按钮
    handleAdd() {
      // 去新增页面
      this.$router.push('/content/addArticle')
    },
    // 删除
    handleDel(item) {
      // 提示用户是否删除
      this.$confirm('此操作将永久删除该文章, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        const { success, message } = await delArticle(item.id)
        if (success) {
          this.$message.success('删除成功')
          // 重新获取列表
          this.getArticles()
        } else {
          this.$message.error(message)
        }
      }).catch(() => {
        this.$message.info('您取消了操作')
      })
    },
    // 编辑
    handleEdit(item) {
      console.log(item)
      // 跳转到编辑页
      this.$router.push(`/content/addArticle?id=${item.id}`)
    },
    // 获取列表
    async getArticles() {
      const {
        success,
        data: { rows, total },
        message
      } = await findArticles(this.page.start, this.page.limit, this.form)
      if (success) {
        this.list = rows
        this.page.total = total
      } else {
        this.$message.error(message)
      }
    },
    // 是否显示状态更改
    async handleStateChange(id, isShow) {
      const { success, message } = await changeShowStatus({ id, isShow })
      if (success) {
        this.$message.success('修改成功')
      } else {
        this.$message.error(message)
      }
    },
    handleSizeChange(val) {
      this.page.limit = val
      this.page.start = 1
      this.getArticles()
    },
    handleCurrentChange(val) {
      this.page.start = val
      this.getArticles()
    }
  }
}
</script>
<style lang="scss" scoped>
.article {
  .card {
    margin: 30px;

    .delBtn{
        color: red;
    }
    .pagination{
        text-align:right;
        margin-top:30px;
    }
    .item-icon{
      width: 100px;
      height: 100px;
    }
  }
}
</style>
